<template>
  <div class="info-management">
    <div class="header">
      <span class="title">信息管理</span>
      <el-button type="primary" style="float:right;margin-top:13px;" @click="addShopDialogVisible=true">＋ 新建商家</el-button>
    </div>
    <!-- 围栏查询卡片 -->
    <el-card class="search-card">
      <el-form :inline="true">
        <el-form-item label="商家名称">
          <el-input placeholder="请输入商家名称" style="width:180px;" v-model="shopSearchForm.businessName"></el-input>
        </el-form-item>
        <el-form-item label="负责人联系方式">
          <el-input placeholder="请输入负责人联系方式" style="width:180px;" v-model="shopSearchForm.businessHeadPhone"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" style="width:200px;">
          <el-select placeholder="请选择状态" v-model="shopSearchForm.businessStatus" @change="loadShop">
            <el-option label="所有" value="0"/>
            <el-option label="待审核" value="1"/>
            <el-option label="审核通过" value="2"/>
            <el-option label="审核驳回" value="3"/>
            <el-option label="分配账号" value="4"/>
            <el-option label="账户禁用" value="5"/>
          </el-select>
        </el-form-item>
        <el-form-item label="申请日期" style="width:280px;">
          <el-date-picker
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              v-model="timeArr"
              @change="handleTimeChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadShop">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
<!--    商家列表数据-->
    <el-card class="data-card">
      <el-table :data="shopArr">
        <el-table-column align="center" prop="id" label="编号"></el-table-column>
        <el-table-column align="center" prop="businessName" label="商家名称"></el-table-column>
        <el-table-column align="center" prop="businessLicense" label="营业执照"></el-table-column>
        <el-table-column align="center" prop="businessHeadName" label="负责人"></el-table-column>
        <el-table-column align="center" prop="businessHeadPhone" label="联系电话"></el-table-column>
        <el-table-column align="center" prop="entryTime" label="申请时间"></el-table-column>
        <el-table-column align="center" prop="status" label="审批状态"></el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button type="primary" size="small">审批</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20]"
            v-model:current-page="currentPage"
            v-model:page-size="currentSize"
            v-model:total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>


    <el-dialog
        title="新增商家"
        v-model="addShopDialogVisible"
        class="add-shop-dialog"
        @closed="onReset"
    >
      <el-form label-width="120px" style="width: 300px">
        <el-form-item label="商家名称" required>
          <el-input placeholder="请输入商家名称" v-model="form.businessName" ></el-input>
        </el-form-item>
        <el-form-item label="行业类型" required>
          <el-select placeholder="请选择行业类型" v-model="form.industryType"  @click="loadCategory" >
            <el-option
                v-for="item in category"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" required>
          <el-input placeholder="请输入负责人姓名" v-model="form.businessHeadName"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话" required>
          <el-input placeholder="请输入负责人电话" v-model="form.businessHeadPhone"></el-input>
        </el-form-item>
        <el-form-item label="公司地址" required>
          <el-input placeholder="请输入公司地址" v-model="form.companyAddress"></el-input>
        </el-form-item>
        <el-form-item label="营业执照">
          <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="门店Logo">
          <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商家简介" required>
          <el-input type="textarea" v-model="form.businessIntroduction"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

const shopSearchForm = ref({
  id: '',
  businessName: '',
  businessHeadPhone: '',
  businessStatus: '',
  startingTime: '',
  endTime: ''
});

const shopArr = ref([]);

const loadShop = () => {
  shopSearchForm.value.pageSize = currentSize.value;
  shopSearchForm.value.pageNo = currentPage.value;
  console.log(shopSearchForm.value);
  axios.get(BASE_URL + '4040/admin/basic/business/info/list', { params: shopSearchForm.value })
      .then((response) => {
        if (response.data.code == 0) {
          console.log(response.data.data.objects);
          shopArr.value = response.data.data.objects;
          total.value = response.data.data.total;//设置总条目数
        } else {
          ElMessage.error(response.data.message);
        }
      })
}
const resetSearch = () => {
  shopSearchForm.value = {};
  timeArr.value = [];
  loadShop();
}
onMounted(() => {
  loadShop();
})
const addShopDialogVisible = ref(false);

const form = ref({
  businessHeadName: '',
  businessHeadPhone: '',
  businessIntroduction: '',
  businessLicense: '',
  businessLogo: '',
  businessName: '',
  businessStatus: '',
  companyAddress: '',
  id: '',
  industryType: ''
});
const category =ref([]);

const onSubmit = () => {
  console.log(form.value);
  axios.post(BASE_URL+'4040/admin/basic/business/info/save',form.value)
      .then((response) => {
        if (response.data.code == 0) {
          form.value={};
          timeArr.value = [];
          addShopDialogVisible.value = false;
          loadShop();
          ElMessage.success('新增成功');
        } else {
          ElMessage.error(response.data.message);
        }
      })
};

const loadCategory = () => {
  axios.get(BASE_URL + '4040/admin/basic/business/category/list/')
      .then((response) => {
        if (response.data.code == 0) {
          // 假设后端返回的是 {id: 1, name: "餐饮"}，转换为 {label: "餐饮", value: "餐饮"}
          category.value = response.data.data.map(item => ({
            label: item.label,
            value: item.id
          }));
        } else {
          ElMessage.error(response.data.message);
        }
      });
};
const onReset = () => {
  form.value = {businessHeadName: '',
    businessHeadPhone: '',
    businessIntroduction: '',
    businessLicense: '',
    businessLogo: '',
    businessName: '',
    businessStatus: '',
    companyAddress: '',
    id: '',
    industryType: ''};
};

const handlePictureCardPreview = (file) => {
  console.log(file);
};

const handleRemove = (file, fileList) => {
  console.log(file, fileList);
};


//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref();
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  loadShop();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  loadShop();
}

const timeArr = ref([]);
const handleTimeChange = (value) => {
  if (value && value.length === 2) {
    shopSearchForm.value.startingTime = value[0];
    shopSearchForm.value.endTime = value[1] || `${value[0]} 23:59:59`; // 如果没有选择结束时间，则默认为开始时间的当天结束
  } else {
    shopSearchForm.value.startingTime = '';
    shopSearchForm.value.endTime = '';
  }
};
</script>

<style scoped>
.info-management {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5f5;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.search-card {
  margin-top: 20px;
}

.data-card {
  margin-top: 20px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.detail-dialog {
  width: 600px;
}

.shop-info {
  background-color: #f9f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.shop-info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 16px;
}

.dialog-footer {
  text-align: right;
}
.el-upload {
  display: inline-block;
}
</style>